<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-07-02 00:09:28
 * @LastEditTime: 2024-08-06 22:20:17
 * @Description: 订单支付
-->
<template>
  <div class="order-pay-page">
    <div class="page-header">
      <div class="user-img-box">
        <img :src="userData.icon" alt="" />
      </div>
      <div class="user-info-box">
        <div class="info name">{{ userData.real_name }}</div>
        <!-- <div class="info tips">开通易问题会员，尊享XX项专属特权</div> -->
      </div>
      <!--  <div class="edit-btn" @click="runTo('/editUserInfo')">
        充值记录
      </div> -->
    </div>
    <div class="pay-middle-box">
      <div v-for="item in propertylist" :key="item.name" class="list-box"
        :class="['list-box' + item.id, { active: item.id == propertyChoose.id }]" @click="chooseProp(item)">
        <div class="list-title">
          {{ item.title }}
        </div>
        <div class="list-cont">
          <div class="cont-val">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
        </div>
      </div>
    </div>
    <div class="pay-list-box">
      <div class="box-title">选择金额</div>
      <div class="pay-list-body">
        <div v-for="item in reserveChooseData" :key="item.id" class="list-box"
          :class="{ active: item.id == payReserve.id }" @click="choosePayFun(item)">
          <div class="title">{{ item.reckon_val }}<span class="unit">{{ propertyChoose.unit }}</span></div>
          <div class="value">￥{{ item.pay_price }}</div>
          <span v-if="item.id == payReserve.id" class="iconfont icon-gougoutubiao"></span>
        </div>
      </div>
    </div>
    <div class="result-box">
      <div id="ewm-box" ref="qrCodeDiv"></div>
      <div class="pay-cont">
        <div class="title">
          应付：<span class="value">￥{{ payReserve.pay_price }}</span>
        </div>
        <div class="tips">微信、支付宝扫描支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2' // 引入生成二维码插件
import { getProperty } from '@/api/user'
import { reserveApi, oderDetailApi, orderPayApi, orderTradeApi } from '@/api/order'
export default {
  components: {
  },

  data() {
    return {
      userData: {
        id: 1,
        users_uniqueid: '',
        real_name: '', // 姓名
        icon: '', // 头像
        unit_name: '', // 单位名称
        unit_logo: '', // 单位logo
        unit_department: '', // 部门
        unit_title: '', // 职位
        unit_job: '', // 任职
        intro: '', // 简介
        create_datetime: '2024-04-07 13:49:04',
        update_datetime: '2024-04-07 13:49:04',
        phone_visible_switch: 0, // 手机号可见性:0=隐藏,1=可见
        unit_level: '', // 单位级别
        real_photo: '' // 真人照片
      },
      propertylist: [
        { title: '空间充值', value: '--', unit: 'GB', id: '1', type: 10500 },
        { title: '流量充值', value: '--', unit: 'GB', id: '2', type: 10400 },
        { title: '时长充值', value: '--', unit: '秒', id: '3', type: 10300 },
        { title: 'E币充值', value: '--', unit: '个', id: '4', type: 10000 }
      ],
      propertyChoose: { title: '空间充值', value: '--', unit: 'GB', id: '1', type: 10500 },
      // 所有的下单配置
      reserveData: {
        10000: [
          {
            'id': 6, // 规则id,下单时的reserve_id用这个
            'pay_price': 1, // 用户需支付的金额(分)
            'reckon_val': 1, // 实际到账值(增长值)
            'type': 10000, // 类型:10000=余额,10300=视频生成时长,10400=流量,10500=空间
            'create_datetime': '2024-05-31 11:07:28',
            'update_datetime': '2024-05-31 11:07:28'
          }
        ], // 余额
        10300: [], // 10300=视频生成时长
        10400: [], // 10400=流量
        10500: []// 10500=空间
      },
      // 充值下单配置
      reserveChooseData: [
        {
          'id': 6, // 规则id,下单时的reserve_id用这个
          'pay_price': 1, // 用户需支付的金额(分)
          'reckon_val': 1, // 实际到账值(增长值)
          'type': 10000, // 类型:10000=余额,10300=视频生成时长,10400=流量,10500=空间
          'create_datetime': '2024-05-31 11:07:28',
          'update_datetime': '2024-05-31 11:07:28'
        }
      ],
      // 选择的金额
      payReserve: {
        'id': 6, // 规则id,下单时的reserve_id用这个
        'pay_price': 1, // 用户需支付的金额(分)
        'reckon_val': 1, // 实际到账值(增长值)
        'type': 10000, // 类型:10000=余额,10300=视频生成时长,10400=流量,10500=空间
        'create_datetime': '2024-05-31 11:07:28',
        'update_datetime': '2024-05-31 11:07:28'
      },
      // 订单详情
      orderData: {
        'id': null,
        'users_uniqueid': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        'order_no': '24051614445232750000000000010922', // 订单号 32位
        'total_price': '1.00', // 总额(分)
        'pay_result_data': {},
        'schedule_status': 1000, // 订单状态:1000=已下单,2000=已支付(前端回调),4000=已完成
        'mode_type': 0, // 订单支付方式 参照发起支付入参
        'source_type': null, // 订单类型 订单类型:10000=余额,10300=视频生成时长,10400=流量,10500=磁盘空间
        'payload': '10', // 载荷
        'closed_switch': 0, // 取消:0=否,1=是
        'create_datetime': '2024-05-16 14:44:52',
        'update_datetime': '2024-05-16 14:44:52'
      }
    }
  },
  created() {
    this.getUserData()
    this.getResverFun()
    this.getOrderData()
  },
  methods: {
    getUserData() {
      const data = JSON.parse(localStorage.getItem('userData'))
      this.userData = data
    },
    // 用户资产信息
    getPropertyData() {
      getProperty().then((res) => {
        const size = this.bytesTosize(res.data.data_traffic_size)
        const disk_size = this.bytesTosize(res.data.disk_size)
        this.propertylist = [
          { title: '空间充值', tips: '空间余额', value: disk_size.size, unit: disk_size.unit, id: '1', type: 10500 },
          { title: '流量充值', tips: '流量余额', value: size.size, unit: size.unit, id: '2', type: 10400 },
          { title: '时长充值', tips: '时长余额', value: res.data.video_render_duration, unit: '秒', id: '3', type: 10300 },
          { title: 'E币充值', tips: 'E币余额', value: res.data.cash_price, unit: '个', id: '4', type: 10000 }
        ]
        let ind = 0
        if (this.orderData.source_type && this.orderData.source_type !== null) {
          switch (this.orderData.source_type) {
            case 10500: ind = 0; break
            case 10400: ind = 1; break
            case 10300: ind = 2; break
            case 10000: ind = 3; break
          }
        }
        const index = this.$route.query.index
        if (index && index !== null) {
          ind = index
        }
        this.chooseProp(this.propertylist[ind])
      })
    },
    bytesTosize(bytes) {
      if (bytes === 0 || bytes === '') {
        return {
          size: 0,
          unit: 'B'
        }
      }
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      // return (bytes / Math.pow(k, i)) + ' ' + sizes[i]
      return {
        size: (bytes / Math.pow(k, i)).toFixed(2),
        unit: sizes[i]
      }
    },
    // 获取充值下单配置
    getResverFun() {
      reserveApi().then((res) => {
        const list = {
          10000: [],
          10300: [],
          10400: [],
          10500: []
        }
        res.data.forEach(elm => {
          list[elm.type].push(elm)
        })
        this.reserveData = list
      })
    },
    chooseProp(item) {
      this.propertyChoose = JSON.parse(JSON.stringify(item))
      this.reserveChooseData = this.reserveData[item.type]
      if (this.reserveChooseData.length > 0) {
        if (this.orderData.id && this.orderData.id !== null) {
          this.reserveChooseData.forEach(elm => {
            if (Number(elm.pay_price) == Number(this.orderData.total_price)) {
              this.choosePayFun(elm)
            }
          })
        } else {
          this.choosePayFun(this.reserveChooseData[0])
        }
      }
    },
    choosePayFun(item) {
      this.payReserve = JSON.parse(JSON.stringify(item))
      this.orderTradeFun(this.payReserve.id)
    },
    getOrderData() {
      const id = this.$route.query.orderId
      if (id && id !== null) {
        const data = {
          order_no: id
        }
        oderDetailApi(data).then((res) => {
          this.orderData = res.data
          this.getPropertyData()
        })
      } else {
        this.getPropertyData()
      }
    },
    // 下单
    orderTradeFun(id) {
      const data = {
        reserve_id: id
      }
      orderTradeApi(data).then((res) => {
        this.orderData = { ...this.orderData, ...res.data }
        this.orderPayFun()
      })
    },
    orderPayFun() {
      const data = {
        order_no: this.orderData.order_no,
        mode_type: 1000
      }
      // orderPayApi(data).then((res) => {
      //   const url = res.data.code_url
      //   this.$nextTick(() => {
      //     this.$refs.qrCodeDiv.innerHTML = '' // 二维码清除
      //     new QRCode(this.$refs.qrCodeDiv, {
      //       text: url, // 二维码链接，参数是否添加看需求
      //       width: 150, // 二维码宽度
      //       height: 150, // 二维码高度
      //       colorDark: '#333333', // 二维码颜色
      //       colorLight: '#ffffff', // 二维码背景色
      //       correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      //     })
      //   })
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-pay-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;

  .page-header {
    width: 100%;
    height: 72px;
    background: linear-gradient(90deg, rgba(199, 246, 230, 0.2) 0%, rgba(199, 246, 230, 0.5) 100%);
    border-radius: 4px;
    padding: 20px 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .user-img-box {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #eee;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-info-box {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      padding-left: 12px;
      font-size: 14px;
      color: #fff;

      .info {
        line-height: 26px;
      }

      .name {
        font-weight: 600;
        font-size: 20px;
        color: #333;
        line-height: 23px;
        text-align: center;
      }

      .tips {
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
      }
    }

    .edit-btn {
      position: absolute;
      top: 25px;
      right: 40px;
      font-size: 12px;
      color: #04d1b8;
      border-radius: 4px;
      padding: 4px 8px;
      cursor: pointer;
    }
  }

  .pay-middle-box {
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    .list-box {
      width: 25%;
      height: 100%;
      position: relative;
      padding: 20px;
      cursor: pointer;
      color: #333;
      line-height: 22px;
      text-align: center;

      .list-title {
        width: 100%;
        font-weight: 600;
        font-size: 16px;
      }

      .list-cont {
        width: 100%;
        height: 35px;
        font-weight: 400;
        font-size: 12px;
      }
    }

    .list-box1.active {
      background: url('~@/assets/images/account/tab-bg1.png');
      background-size: 100% 100%;
      color: #fff;
    }

    .list-box2.active,
    .list-box3.active {
      background: url('~@/assets/images/account/tab-bg3.png');
      background-size: 100% 100%;
      color: #fff;
    }

    .list-box4.active {
      background: url('~@/assets/images/account/tab-bg2.png');
      background-size: 100% 100%;
      color: #fff;
    }

  }

  .pay-list-box {
    width: 100%;
    padding: 20px;

    .box-title {
      text-align: left;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1C1F23;
      line-height: 23px;
      margin-bottom: 20px;
    }

    .pay-list-body {
      width: 100%;
      display: flex;
      min-height: 116px;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .list-box {
        width: 177px;
        height: 116px;
        border-radius: 8px;
        border: 1px solid #D3F9F4;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        position: relative;

        .title {
          font-weight: 600;
          font-size: 20px;
          color: #1C1F23;
          line-height: 23px;

          .unit {
            font-size: 14px;
          }
        }

        .value {
          font-weight: 400;
          font-size: 14px;
          color: #1C1F23;
        }

        .iconfont {
          position: absolute;
          right: -5px;
          bottom: -12px;
          z-index: 80;
          color: #04D1B8;
          font-size: 32px;
        }
      }

      .active {
        border: 1px solid #04D1B8;
      }
    }
  }

  .result-box {
    width: calc(100% - 40px);
    height: 235px;
    background: #F4F5F9;
    border-radius: 8px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    #ewm-box {
      width: 150px;
      height: 150px;
      background: #fff;
      margin-right: 40px;
    }

    .pay-cont {
      .title {
        font-weight: 600;
        font-size: 16px;
        color: #1C1F23;
        line-height: 23px;

        .value {
          font-size: 20px;
          color: #FF3F40;
        }
      }

      .tips {
        font-size: 14px;
        color: #9E9E9E;
        line-height: 26px;
      }
    }
  }
}
</style>
